<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FaceBook</title>

	<link rel="stylesheet" href="./css/bootstrap.css">
	<link rel="stylesheet" href="./css/font-awesome.min.css">
	<link rel="stylesheet" href="./css/main.css">

	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>

	<!-- umeditor -->
	<link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="umeditor/umeditor.config.js"></script>
	<script type="text/javascript" src="umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>

</head>
<body>

	<header class="topbar navbar-default navbar-fixed-top row">

		<!-- logo -->
		<a href="" class="col-sm-1 col-md-1" style="text-align:right;padding-right:0.6em;">
			<i class="icon-2x icon-facebook-sign" style="color:white;"></i>
		</a>

		<!-- search -->
		<form class="form-inline col-sm-4 col-md-4 hidden-xs" role="form">
		  <div class="form-group-sm ">
		    <div class="input-group col-sm-12" >
		      <input class="form-control" type="text" placeholder="用户名">
		      <div class="input-group-addon" width="10%"> <i class="icon-search"></i> </div>
		    </div>
		  </div>
		</form>
		
		<!-- list -->
		<ul class="col-sm-5 nav-list col-md-offset-2 hidden-xs" >
			<li style="border-right:1px solid #365089;">
			    <a href="#">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="30px" height="30px">
			    </a>
			    bool
			</li>
			<li>
				<a href="">首页</a>
			</li>
		  <li>
		 	<lable class="icon-large icon-user"></lable>	
		    <!-- <span class="badge">14</span> -->
		  </li>
		  <li>
		 	<lable class="icon-large icon-comments"></lable>	
		  </li>	
		  <li>
		 	<lable class="icon-large icon-globe"></lable>	
		  </li>	
		  <li style="border-left:1px solid #365089;">
		 	<lable class="icon-large icon-lock" style="color:gray;"></lable>	
		  </li>	
	       <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  <span class="caret"></span></a>
	          <ul class="dropdown-menu" role="menu">
	            <li><a href="#">资料</a></li>
	            <li><a href="#">注销</a></li>
	          </ul>
	        </li>   		  	  
		</ul>
	
	</header>

  <div class="container" style="margin-top:3em;">

  	<div class="row">
		<div class="col-md-9">
			<div class="banner">
			    <a href="#">
			      <img src="./head.jpg" alt="" width="150px" height="150px" class="img-thumbnail" style="position:relative;top:11em;left:1.5em;">
			    </a>
			    <a href="" style="position:relative;top:11em;left:2em;">
					<strong style="color:white;font-size:24px;"> 布尔 </strong>
			    </a>
			    <a href="" style="position:relative;top:7.5em;left:-1em;color:white;font-size:24px;">
					(布尔)
			    </a>


			<!-- menu -->
			<div class="pull-right hidden-xs" style="position:relative;top:18em;padding-right:1em;">

						  
				<!-- 好友 -->
				<div class="btn-group">
				  <button type="button" class="btn btn-default btn-xs"> <i class="icon-user"></i> 好友</button>
				  <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
				    <span class="caret"></span>
				    <span class="sr-only">Toggle Dropdown</span>
				  </button>
				  <ul class="dropdown-menu" role="menu">
				    <li><a href="#">接受通知</a></li>
				    <li class="divider"></li>
				    <li><a href="#">密友</a></li>
				    <li><a href="#">普通朋友</a></li>
				    <li><a href="#">添加到其他名单</a></li>
				    <li class="divider"></li>
				    <li><a href="#">推荐好友</a></li>
				    <li class="divider"></li>
				    <li><a href="#">删除好友</a></li>
				  </ul>
				</div>
				<!-- 好友 -->

				<!-- 已关注 -->
				<div class="btn-group">
				  <button type="button" class="btn btn-default btn-xs"> <i class="icon-ok"></i> 已关注</button>
				  <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
				    <span class="caret"></span>
				    <span class="sr-only">Toggle Dropdown</span>
				  </button>
				  <ul class="dropdown-menu" role="menu">
				  	<center> <span style="color:gray;font-size:12px;">在动态消息中</span> </center> 
				    <li><a href="#">优先查看</a></li>
				    <li><a href="#">默认设置</a></li>
				    <li class="divider"></li>
				    <li><a href="#">停止关注</a></li>
				  </ul>
				</div>
				<!-- 已关注 -->


				<!-- 发消息 -->
				<button type="button" class="btn btn-default btn-xs"> <i class="icon-comment"></i> 发消息</button>
				<!-- 发消息 -->

				<!-- ... -->
				<div class="btn-group">
				  <button type="button" class="btn btn-default btn-xs"> <i></i> ... </button>
				  <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
				    <span class="caret"></span>
				    <span class="sr-only">Toggle Dropdown</span>
				  </button>
				  <ul class="dropdown-menu" role="menu">
				    <li><a href="#">查看友情</a></li>
				    <li><a href="#">视频通话</a></li>
				    <li class="divider"></li>
				    <li><a href="#">打招呼</a></li>
				    <li class="divider"></li>
				    <li><a href="#">举报</a></li>	    
				    <li><a href="#">拉黑</a></li>	    
				  </ul>
				</div>
				<!-- ... -->

			</div>
			<!-- menu -->


			</div>

			<!-- banner-menu-list -->
			<div class="banner-menu-list">
				<ul class="hidden-xs col-xs-offset-4 col-sm-offset-4 col-md-offset-4 col-sm-6 col-md-6">
					<li> <a href="">时间线</a> </li>
					<li> <a href="">简介</a> </li>
					<li> <a href="">好友</a> <span>1个共同好友</span> </li>
					<li> <a href="">照片</a> </li>
					<li> <a href="">更多</a> </li>
				</ul>
			</div>
			<!-- banner-menu-list -->


		</div>
  	</div>
	<!-- row -->

	<br class="visible-xs">

	<!-- row -->
	<div class="row">

		<!-- left -->
		<div class="col-md-3 ">

			<div class="home-intro" style="background-color:white;">
				<ul>
					<li> <i class="icon-large icon-globe" style="color:#4267B2;"></i> <strong>介绍</strong> </li>
					<li> <i class="icon-home" style="color:#A5A9B3;"></i> 曾经就读于临沂大学</li>
					<li> <i class="icon-home" style="color:#A5A9B3;"></i> 所在地:临沂</li>
					<li> <i class="icon-heart" style="color:#A5A9B3;"></i> 单身</li>
					<li> <i class="icon-user-md" style="color:#A5A9B3;"></i> 来自:临沂费县</li>
				</ul>
			</div>

			<div class="home-phone col-xs-12 col-sm-12 col-md-12" >
				<ul class="col-xs-12 col-sm-12 col-md-12">
					<li> <i class="icon-large icon-camera" style="color:#4267B2;"></i> <strong>照片</strong> </li>
					<ul>
						<li> <a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px">  </a> </li>
						<li> <a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px">  </a> </li>
						<li> <a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px">  </a> </li>
						<li> <a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px">  </a> </li>
						<li> <a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px">  </a> </li>
						<li> <a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px">  </a> </li>
					</ul>
				</ul>
			</div>

			<!-- 好友 -->
			<div class="home-friend col-xs-12 col-sm-12 col-md-12" >
				<ul class="col-xs-12 col-sm-12 col-md-12">
					<li>
						<i class="icon-large icon-group" style="color:#4267B2;"></i> 
						<strong>好友</strong>  
						<span>495 (2个共同好友)</span>
					</li>
					<ul>
						<li> 
							<a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px"> </a> 
							<br>
							<a href=""> bool</a>  
						</li>
						<li> 
							<a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px"> </a> 
							<br>
							<a href=""> bool</a>  
						</li>
						<li> 
							<a href=""> <img src="./head-test.jpg" alt="" width="80px" height="80px"> </a> 
							<br>
							<a href=""> bool</a>  
						</li>						
				</ul>
			</div>
			<!-- 好友 -->

		</div>
		<!-- left -->

		<!-- center -->
		<div class="col-xs-12 col-sm-12 col-md-6 pull-left" style="padding-left:1em;">
			<div>
				<script type="text/plain" id="myEditor" style="width:100%;height:6em;"></script>
				<script>
				    //实例化编辑器
					var um = UM.getEditor('myEditor', {
						toolbar:[
				            'forecolor link |','emotion image video ',
				        ],
					});
				</script>
			</div>

			<div class="col-xs-12 col-sm-12 col-md-12 pull-left" style="padding-top:0.5em;">
				<button type="button" class="btn btn-primary btn-xs pull-right"> 发 布 </button>
			</div>


			<!-- list -->
			<div class="col-xs-12 col-sm-12 col-md-12 comment-list">
				<ul class="col-sm-12 col-md-12">
					<li>
					    <a href="#">
					      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="40px" height="40px">
					    </a>
					</li>
					<li> 
						<a href=""> <strong style="color:#365899;">布尔</strong> </a> 
					</li>
					<li style="position:relative;right:3.2em;top:1.3em;"> 
						<a href="" style="color:gray;font-size:12px;"> 2小时 </a> 
					</li>

					<li class="dropdown pull-right" style="position:relative;right:-1em;top:-1.2em;">
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  
			          	<span class="icon-angle-down" style="text-decoration:none;"></span>
			          </a>
			          <ul class="dropdown-menu" role="menu">
			            <li><a href="#" class="icon-remove"> 隐藏</a></li>
			            <li><a href="#" class="icon-remove-sign"> 停止关注</a></li>
			            <li class="divider"></li>
			            <li><a href="#" class="icon-info-sign"> 举报帖子</a></li>
			            <li><a href="#" class="icon-heart"> 收藏帖子</a></li>

			          </ul>
			          
			        </li> 

					<li style="margin-top:1em;" class="pull-left col-sm-12 comment-content">
						<p>
							好像沒睡飽，匆匆從田中趕到台中上課，隨手又買到臺鐵便當，好開心！<br>
							<img src="./test.jpg" alt="">
						</p>	
						<hr>			
					</li>

					<li class="col-xs-12 col-sm-12 col-md-12 comment-tool">
						<span>  <i class="icon-thumbs-up"></i> <a href=""> 赞</a> </span> 
						<span>  <i class="icon-comment"></i> <a href=""> 评论</a> </span> 
						<span>  <i class="icon-share-alt"></i> <a href=""> 分享</a> </span> 
					</li>
				</ul>
				
			</div>	
			

			<!-- 评论列表 -->
			<div class="col-xs-12 col-sm-12 col-md-12 comment-list-content">
				<ul class="col-xs-12 col-sm-12">
					<li>
						<i class="icon-thumbs-up" style="color:#5890FF;"></i>
						<a href=""> 尹印和其他 90 位用户 </a>
						<hr style="margin-top:0.3em;">
					</li>
					<li class="comment-list-contents">
						<div>
						    <a href="#" class="pull-left">
						      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="32px" height="32px">
						    </a>
						    <a href="" class="pull-left"> <strong>bool</strong> </a>
						    <p class="pull-left"> 测试评论！！！！！！</p>
						</div>
					    <div class="pull-left" style="margin-left:-13em;margin-top:1.4em;">
						    <a href="">赞</a>
						    <a href="">回复</a>
						    <a href="">2小时</a>
					    </div>
					    <br><br>
					</li>
					<li class="comment-list-contents">
						<div>
						    <a href="#" class="pull-left">
						      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="32px" height="32px">
						    </a>
						    <a href="" class="pull-left"> <strong>bool</strong> </a>
						    <p class="pull-left"> 测试评论！！！！！！</p>
						</div>
					    <div class="pull-left" style="margin-left:-13em;margin-top:1.4em;">
						    <a href="">赞</a>
						    <a href="">回复</a>
						    <a href="">2小时</a>
					    </div>
					    <br><br>
					</li>
					<li>
						<!-- comment-box -->
						<div class="col-sm-12 col-md-12" style="margin-top:1em;">				
							<script type="text/plain" id="Editor" style="width:100%;height:2em;"></script>
							<script>
							    //实例化编辑器
								var um = UM.getEditor('Editor', {
									toolbar:[
							            'emotion image ',
							        ],
								});
							</script>
						</div>	
						<!-- comment-box -->
				
						<div class="col-sm-12 col-md-12 content-commit" style="padding-top:0.5em;margin-bottom:1em;">
							<button type="button" class="btn btn-primary btn-xs pull-right"> 发 布 </button>
						</div>

					</li>

				</ul>
			</div>	

			<!-- list -->


		</div>	
		<!-- center -->	


	</div>
	<!-- row -->


  </div>
<!-- container -->
</body>
</html>
